﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="Catalogo.Windows8.Views.ItemPage"
    DataContext="{Binding DefaultViewModel.ViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:common="using:Catalogo.Windows8.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:viewmodel="using:Catalogo.Portable.ViewModel"
    mc:Ignorable="d">

    <Page.Resources>
        <viewmodel:HomePageViewModel x:Key="ViewModel"/>
        <CollectionViewSource
            x:Name="itemsViewSource"
            Source="{Binding Categoria.Itens}"/>
    </Page.Resources>

    <Page.TopAppBar>
        <AppBar x:Name="TopApp" Padding="10,0,10,0" MinHeight="110" Background="#D1000000" BorderBrush="#D1000000">
            <Grid Height="100" Margin="40,0">
                <StackPanel Margin="0" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left">
                    <Button x:Name="btnHome" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" 
                            Command="{Binding AbrirHomeCommand, Source={StaticResource ViewModel}}">
                        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="92" Margin="0" Width="92">
                            <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/AppBarBtn/HomeappbarBtn.png" Width="92" Margin="0" Height="92"/>
                        </Grid>
                    </Button>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.TopAppBar>

    <Grid
        Style="{StaticResource LayoutRootStyle}"
        Background="#FF3E4849">

        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <FlipView
            x:Name="flipView"
            AutomationProperties.AutomationId="ItemsFlipView"
            AutomationProperties.Name="Item Details"
            TabIndex="1"
            Grid.RowSpan="2"
            ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
            SelectedItem="{Binding Item, Mode=TwoWay}"
            Visibility="Visible">            

            <FlipView.ItemContainerStyle>
                <Style TargetType="FlipViewItem">
                    <Setter Property="Margin" Value="0,137,0,0"/>
                </Style>
            </FlipView.ItemContainerStyle>

            <FlipView.ItemTemplate>
                <DataTemplate>

                    <!--
                        UserControl chosen as the templated item because it supports visual state management
                        Loaded/unloaded events explicitly subscribe to view state updates from the page
                    -->
                    <UserControl x:Name="UserControl" Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
                            <ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1" ZoomMode="Disabled" VerticalScrollMode="Disabled" Height="Auto" HorizontalScrollMode="Auto">
                            <StackPanel>
                                <Grid Height="Auto" MaxHeight="750">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="760"></ColumnDefinition>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    
                                    <!-- Grid de imagem -->
                                    <Grid x:Name="GridImage" Grid.Column="0" HorizontalAlignment="Left" Width="760" Height="600" Margin="117,0,20,10" VerticalAlignment="Top">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="500"></RowDefinition>
                                            <RowDefinition Height="100"></RowDefinition>
                                        </Grid.RowDefinitions>
                                        <Border Background="#003D3D3D" Grid.Row="0">
                                            <Image x:Name="image" Source="{Binding ImageUrl}" Stretch="UniformToFill"/>
                                        </Border>
                                        <Grid VerticalAlignment="Bottom" Background="#EA1E2324" Height="65" Margin="0,0,0,26" Grid.Row="1">
                                            <StackPanel Orientation="Vertical" Margin="10,0,0,5" HorizontalAlignment="Left" VerticalAlignment="Center">
                                                <TextBlock Text="{Binding SubTitulo}" FontSize="20" FontFamily="Segoe UI" HorizontalAlignment="Left"/>
                                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,10,10,0" VerticalAlignment="Center">
                                                    <TextBlock FontSize="12" FontFamily="Segoe UI" Text="R$ " VerticalAlignment="Bottom" LineStackingStrategy="BlockLineHeight" Margin="0,0,3,0"/>
                                                    <TextBlock  Text="{Binding Valor}" TextWrapping="NoWrap" FontFamily="Segoe UI" FontSize="30"  LineStackingStrategy="BlockLineHeight" LineHeight="22.667"/>
                                                </StackPanel>
                                            </StackPanel>
                                        </Grid>
                                    </Grid>
                                    
                                    <!-- coluna para a descrição do item -->
                                    <common:RichTextColumns Grid.Column="1" x:Name="richTextColumns" Margin="10,0,10,47" VerticalAlignment="Top" >
                                        <RichTextBlock  MaxWidth="560"  x:Name="richTextBlock" Width="560" Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">
                                            <Paragraph>
                                                <Run FontWeight="SemiLight" Text="{Binding Descricao}"/>
                                            </Paragraph>
                                        </RichTextBlock>

                                        <!-- Additional columns are created from this template -->
                                        <common:RichTextColumns.ColumnTemplate>
                                            <DataTemplate>
                                                <RichTextBlockOverflow Width="560" Margin="80,0,0,0">
                                                    <RichTextBlockOverflow.RenderTransform>
                                                        <TranslateTransform X="-1" Y="4"/>
                                                    </RichTextBlockOverflow.RenderTransform>
                                                </RichTextBlockOverflow>
                                            </DataTemplate>
                                        </common:RichTextColumns.ColumnTemplate>
                                    </common:RichTextColumns>
                                </Grid>
                            </StackPanel>
                            
                        </ScrollViewer>
                    </UserControl>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

        
        <!-- Snapped -->
        <FlipView
            x:Name="flipViewSnapped"
            AutomationProperties.AutomationId="ItemsFlipView"
            AutomationProperties.Name="Item Details"
            TabIndex="1"
            Grid.RowSpan="2"
            ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
            SelectedItem="{Binding Item, Mode=TwoWay}"
            Visibility="Collapsed">

            <FlipView.ItemContainerStyle>
                <Style TargetType="FlipViewItem">
                    <Setter Property="Margin" Value="0,137,0,0"/>
                </Style>
            </FlipView.ItemContainerStyle>

            <FlipView.ItemTemplate>
                <DataTemplate>

                    <!--
                        UserControl chosen as the templated item because it supports visual state management
                        Loaded/unloaded events explicitly subscribe to view state updates from the page
                    -->
                    <UserControl x:Name="UserControl" Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates" Margin="0,0,0,0">
                        <ScrollViewer x:Name="scrollViewer"  ZoomMode="Disabled" VerticalScrollMode="Auto" Height="Auto" HorizontalScrollMode="Disabled">
                            <StackPanel>
                                <Grid Height="Auto" Width="315">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="315"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="300"></RowDefinition>
                                        <RowDefinition Height="*"></RowDefinition>
                                    </Grid.RowDefinitions>

                                    <Grid x:Name="GridImage" Grid.Column="0" HorizontalAlignment="Left" Width="310" Height="300" >
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="200"></RowDefinition>
                                            <RowDefinition Height="100"></RowDefinition>
                                        </Grid.RowDefinitions>
                                        <Border Background="#003D3D3D" Grid.Row="0">
                                            <Image x:Name="image" Source="{Binding ImageUrl}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Nome}"/>
                                        </Border>
                                        <Grid VerticalAlignment="Bottom" Background="#EA1E2324" Height="65" Margin="0,0,0,26" Grid.Row="1">
                                            <StackPanel Orientation="Vertical" Margin="10,0,0,5" HorizontalAlignment="Left" VerticalAlignment="Center">
                                                <TextBlock Text="{Binding SubTitulo}" FontSize="20" FontFamily="Segoe UI" HorizontalAlignment="Left"/>
                                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,10,10,0" VerticalAlignment="Center">
                                                    <TextBlock FontSize="12" FontFamily="Segoe UI" Text="R$ " VerticalAlignment="Bottom" LineStackingStrategy="BlockLineHeight" Margin="0,0,3,0"/>
                                                    <TextBlock  Text="{Binding Valor}" TextWrapping="NoWrap" FontFamily="Segoe UI" FontSize="30"  LineStackingStrategy="BlockLineHeight" LineHeight="22.667"/>
                                                </StackPanel>
                                            </StackPanel>
                                        </Grid>
                                    </Grid>
                                    <RichTextBlock x:Name="richTextBlock" Width="310" Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False" Grid.Row="1" Height="Auto" Margin="0,0,0,20" >
                                        <Paragraph>
                                            <Run FontWeight="SemiLight" Text="{Binding Descricao}"/>
                                        </Paragraph>
                                    </RichTextBlock>
                                    
                                </Grid>
                            </StackPanel>
                            
                        </ScrollViewer>
                    </UserControl>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
        
        
        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource GroupDetailBkButtonStyle}"/>
            <StackPanel Grid.Column="2" Margin="0,20,0,15">
                <TextBlock x:Name="pageTitle" Text="{Binding Item.Nome}" Style="{StaticResource PageHeaderTextStyle}"  IsHitTestVisible="false" Margin="0,10,0,10"/>
                <TextBlock x:Name="pageSubtitle" Text="{Binding Item.Categoria.Nome}"  Grid.Row="2" IsHitTestVisible="false" Margin="20,0,0,0" FontSize="26.667" FontWeight="Light" />
            </StackPanel>
          
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The back button respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipViewSnapped" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipViewSnapped" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageSubtitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SubTituloSnappedHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
